<template>
	<view class="drop-down-menu" :style="{'top': `${top}rpx`}" v-if="visible" @click.stop.prevent="hideDrop">
		<view class="drop-down-height">
			<view style="max-height: 900upx; overflow-y: scroll;">
				<view v-for="(item, index) in list" :key='index' class="drop-down-item" :class="activeIncdx == index ? 'drop-down-active' : ''" @click.prevent="setActive(item, index)">
					<view class="drop-down-label">{{item[name]}}</view>
					<image src="../../static/image/icon/law/1.png" class='drop-down-img' v-if="activeIncdx == index"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'drop-down-menu',
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			name: {
				type: String,
				default: 'label'
			},
			actives: {
				type: [String, Number],
				default: 0
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeIncdx: this.actives,
				visibles: this.visible,
				top: 86,
				timer: null
			}
		},
		methods: {
			hideDrop() {
				this.visibles = false
				
				this.$emit('setVisible', this.visibles)
			},
			setActive(item, index) {	
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
				
					query.select('.drop-down-menu').boundingClientRect(data => {
						this.top = -data.height * 2
					}).exec()
				})
				
				if(this.timer) {
					clearTimeout(this.timer)
				}
				
				this.timer = setTimeout(() => {
					this.activeIncdx = index
					this.visibles = false
					this.top = 86
					
					this.$emit('activeIndex', this.activeIndex)
					this.$emit('setVisible', this.visibles)
					this.$emit('data', item)
				}, 500)
			},
			setTop() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
				
					query.select('.drop-down-menu').boundingClientRect(data => {
						this.top = -data.height * 2
					}).exec()
				})
				
				setTimeout(() => {
					this.top = 86
				}, 500)
			}
		},
		mounted() {
			// this.setTop()
		}
	}
</script>

<style scoped>
	@import url("./drop-down-menu.css");
</style>
